/**
 * 展示返利dialog
 */
import Modal from 'antd/lib/modal/Modal';
import React,{useImperativeHandle, useState} from 'react';
import { Col, Row,Descriptions, Button, Divider, Steps,Image, Table, Collapse, Upload, Popover } from 'antd';
const { Panel } = Collapse;

export type Order = {
  };

const OrderHistory: React.FC<Order> = React.forwardRef((props:any,ref:any)=>{

    const [data,setData] = useState<any>([{'productName':'颅内球囊扩张导管',num:4,'manufacturer':'test',
    child:[
        {seq:'1','productStandard':'SM*DAC-6C105','productProperty':'生产产品',unit:'根',num:'2','price':1200,'level':'A级','sendNum':2,'total':2400,'bak':''},
        {seq:'2','productStandard':'SM*DAC-6S105','productProperty':'生产产品',unit:'根',num:'2','price':2400,'level':'A级','sendNum':2,'total':4800,'bak':''},
    ]
    }
    ,{'productName':'远端通路导管',num:4,'manufacturer':'test',  child:[
        {seq:'1','productStandard':'SM*DAC-6C105','productProperty':'生产产品',unit:'根',num:'2','price':1200,'level':'A级','sendNum':2,'total':2400,'bak':''},
        {seq:'2','productStandard':'SM*DAC-6S105','productProperty':'生产产品',unit:'根',num:'2','price':2400,'level':'A级','sendNum':2,'total':4800,'bak':''},
    ]}]);
  
    const columns = [
        {
          title: '产品名称',
          dataIndex: 'productName',
          render:(_,record:any)=>{
            return <span style={{fontWeight:'bold'}}>{record.productName}</span>
          }
        },
        {
          title: '产品数量',
          dataIndex: 'num',
          render:(_,record:any)=>{
            return <span style={{fontWeight:'bold'}}>{'数量：'+record.num}</span>
          }
        },
        {
            title: '产品厂家',
            dataIndex: 'manufacturer',
            render:(_,record:any)=>{
              return <span style={{fontWeight:'bold'}}>{'厂家：'+record.manufacturer}</span>
            }
        },
      ];

      const expandedRowRender = (val:any) => {
        const columns = [
          {
            title: '序号',
            dataIndex: 'seq',
          },
          {
            title: '型号',
            dataIndex: 'productStandard',
          },
          {
            title: '性质',
            dataIndex: 'productProperty',
          },
          {
            title: '单位',
            dataIndex: 'unit',
          },
          {
            title: '数量',
            dataIndex: 'num',
          },
          {
            title: '单价',
            dataIndex: 'price',
          },
          {
            title: '价格等级',
            dataIndex: 'level',
          },
          {
            title: '已发数量',
            dataIndex: 'sendNum',
          },
          {
            title: '金额(元)',
            dataIndex: 'total',
          },
          {
            title: '备注',
            dataIndex: 'bak',
          },
        ];
        return <Table pagination={false} size='small' columns={columns} dataSource={val.child} />;
      };

      useImperativeHandle(ref,()=>({
        init:(id:string)=>{
            setModalVisible(true)
        }
      }));
      
  
    const genExtra = (flag:number) => {
      return  <Row>
      <Col span={4} >
          产品总数：<span style={{fontWeight:'bold',color:'#4091f7'}}>6</span>
      </Col>
      <Col span={5} >
          总金额：<span style={{fontWeight:'bold',color:'#4091f7'}}>¥180.600.00</span>
      </Col>
      <Col span={5} >
          优惠金额：<span style={{fontWeight:'bold',color:'#4091f7'}}>¥-15.600.00</span>
      </Col>
      <Col span={5} >
          返利金额：<span style={{fontWeight:'bold',color:'#4091f7'}}>¥0.00</span>
      </Col>
      <Col span={5} >
          实付金额：<span style={{fontWeight:'bold',color:'#fa9000'}}>¥120.600.00</span>
      </Col>
    </Row>
    };

    return (
        <div>
         <Row>
            <Col span={6} style={{borderRight:'1px solid #f0f0f0'}}>
                <Descriptions title="订单基本信息" column={1} size="small" labelStyle={{width:90,color:'#444444',fontWeight:700}}>
                    <Descriptions.Item label="订单号">XW20220201002</Descriptions.Item>
                    <Descriptions.Item label="客户代码">JXS0652</Descriptions.Item>
                    <Descriptions.Item label="客户名称">合肥**医疗科技有限公司</Descriptions.Item>
                    <Descriptions.Item label="订货日期">2022-07-23</Descriptions.Item>
                    <Descriptions.Item label="交货日期">2022-07-30</Descriptions.Item>
                    <Descriptions.Item label="付款方式">预付</Descriptions.Item>
                    <Descriptions.Item label="运费方式">到付</Descriptions.Item>
                    <Descriptions.Item  label="销售">吴辉</Descriptions.Item>
                </Descriptions>
                <Divider />
                <Descriptions title="收货信息" column={1} size="small" labelStyle={{width:90,color:'#444444',fontWeight:700}} contentStyle={{paddingRight:20}}>
                    <Descriptions.Item label="收货人">张三</Descriptions.Item>
                    <Descriptions.Item label="收货电话">13123456789</Descriptions.Item>
                    <Descriptions.Item label="收货地址">南通市崇川区宁北路与固镇路交口北辰旭辉中心</Descriptions.Item>
                    <Descriptions.Item label="出库单地址">南通市崇川区淮海大道交口京商商贸城</Descriptions.Item>
                  
                </Descriptions>
            </Col>    
            <Col span={18}>
            {/* <div style={{fontSize:14,textAlign:'center',marginTop:10}}>发货单号：XW2022090211-01,XW2022090212-01,XW2022090212-02,XW2022090212-03</div> */}
            {/* <Divider /> */}
            <div style={{paddingLeft:20}}>     
                <Collapse defaultActiveKey={['1']}>
                  <Panel header="修改日期：2022-08-30" key="1" extra={genExtra(1)}>
                        <Table
                          className='components-table-demo-nested'
                          columns={columns}
                          pagination={false} 
                          showHeader={false}
                          expandable={{
                          expandedRowRender,
                          defaultExpandAllRows: true,
                          expandIconColumnIndex: -1
                          }}
                          dataSource={data}
                          size="small"
                      />
                      <div style={{height:20}}></div>
                      <Descriptions title="" column={1} bordered size="small" labelStyle={{width:90}} >
                          <Descriptions.Item label="附件">
                             <span style={{paddingRight:20}}>下单合同.pdf</span>
                          </Descriptions.Item>
                          <Descriptions.Item label="备注">测试备注</Descriptions.Item>
                      </Descriptions>
                  </Panel>
                  <Panel header="修改日期：2022-08-26" key="2" extra={  genExtra(2)}>
                  
                        <Table
                          className='components-table-demo-nested'
                          columns={columns}
                          pagination={false} 
                          expandable={{
                          expandedRowRender,
                          defaultExpandAllRows: true,
                          expandIconColumnIndex: -1
                          }}
                          dataSource={data}
                          size="small"
                      />
                        <div style={{height:20}}></div>
                       <Descriptions title="" column={1} bordered size="small" labelStyle={{width:90}} >
                          <Descriptions.Item label="附件">
                             <span style={{paddingRight:20}}>下单合同.pdf</span>
                          </Descriptions.Item>
                          <Descriptions.Item label="备注">测试备注</Descriptions.Item>
                      </Descriptions>
                  </Panel>
                </Collapse>
               
            </div>
           </Col>
         </Row>
        
        </div>
    );
});
export default OrderHistory;